<template>
  <div class="box">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column prop="content" label="内容" width="180" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column label="状态" width="180">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-popconfirm
            width="220"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="修改内容" width="500">
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="obj.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="obj.content" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="obj.status" />
      </el-form-item>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="OKHandle"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { Edit } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { ListAPI, DeleteAPI, DateAPI } from "../api/api";

let list = ref([]);
function loadlist() {
  ListAPI().then((r) => {
    console.log(r.data);
    list.value = r.data;
  });
}
loadlist();

const handleDelete = (index, row) => {
  console.log(index, row);
  DeleteAPI(row.id).then((r) => {
    loadlist();
  });
};

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
let obj = ref({});
let ida = ref("");
const handleEdit = (index, row) => {
  console.log(index, row);
  obj.value = { ...row };
  ida.value = row.id;
  dialogFormVisible.value = true;
};

const OKHandle = () => {
  let objs = {
    title: obj.value.title,
    content: obj.value.content,
    status: obj.value.status,
  };
  DateAPI(ida.value, objs).then((r) => {
    console.log(r.data);
    dialogFormVisible.value = false;
    loadlist();
  });
};

const handleStatusChange = (row) => {
  let objss = {
    title: row.title,
    content: row.content,
    status: row.status,
  };
  console.log(row);
  DateAPI(row.id, objss).then((r) => {
    console.log(r.data);
    loadlist();
  });
};
</script>
<style scoped>
.box {
  float: right;
}
</style>
